<template>
    <el-dialog title="更新任务" v-model="formVisible" width="450px" :close-on-click-modal="true" append-to-body draggable>
        <el-form :model="editForm" label-width="90px" :rules="formRules" ref="editFormRef">
            <el-form-item label="任务名称" prop="taskname">
                <el-input v-model="editForm.taskname" clearable autocomplete="off" style="width: 100%" />
            </el-form-item>
            <el-form-item label="任务描述" prop="taskdesc">
                <el-input v-model="editForm.taskdesc" clearable autocomplete="off" style="width: 100%" />
            </el-form-item>
            <el-form-item label="任务状态" prop="status">
                <el-select v-model="editForm.status" placeholder="请选择" clearable filterable style="width: 100px">
                    <el-option v-for="item in statusOptions" :key="item.val" :label="item.label" :value="item.val" />
                </el-select>
            </el-form-item>
            <el-form-item label="截止时间" prop="endtime">
                <el-date-picker clearable style="width: 100%" v-model="editForm.endtime" type="datetime" value-format="YYYY-MM-DD hh:mm:ss" format="YYYY-MM-DD hh:mm:ss" placeholder="" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="formVisible = false">取消</el-button>
            <el-button type="primary" @click.native="editSubmit" :loading="loading" >提交</el-button>
        </div>
    </el-dialog>
</template>

<script setup>
const {proxy} = getCurrentInstance();
const formVisible = ref(false);
const loading = ref(false);
const formRules = {
    taskname: [
        {required: true, message: '请输入任务名称', trigger: 'blur'}
    ],
    taskdesc: [
        {required: true, message: '请输入任务描述', trigger: 'blur'}
    ],
    status: [
        {required: true, message: '请输入状态', trigger: 'blur'}
    ],
    endtime: [
        {required: true, message: '请输入截止时间', trigger: 'blur'}
    ]
};

const editForm = ref({
    id: null,
    taskname: null,
    taskdesc: null,
    status:null,
    endtime:null
});
const emit = defineEmits(["success"]);

const statusOptions = [{val:1,label:'未开始'},{val:2,label:'进行中'},{val:3,label:'已完成'}];
function show(index, row) {
    proxy.resetForm("editFormRef");
    editForm.value.id = row.id;
    editForm.value.taskname = row.taskname;
    editForm.value.taskdesc = row.taskdesc;
    editForm.value.status = row.status;
    editForm.value.endtime = row.endtime;
    formVisible.value = true;
}
function editSubmit() {
    proxy.$refs.editFormRef.validate((valid) => {
        if (valid) {
            var params = {
                _fk: "u",
                id:editForm.value.id,
                taskname: editForm.value.taskname|| null,
                taskdesc: editForm.value.taskdesc|| null,
                status: editForm.value.status|| null,
                endtime: editForm.value.endtime|| null,
            };
            loading.value = true;
            proxy.request.post('/update_task', params).then((res) => {
                proxy.$modal.msgSuccess(res.data.msg);
                proxy.removeDynamicLoaded();
                proxy.$refs['editFormRef'].resetFields();
                formVisible.value = false;
                loading.value = false;
                emit("success", 1);
            }).catch((err) => {
                loading.value = false;
            });
        }
    });
}
defineExpose({
    show
})
</script>

<style scoped>

</style>

